觀看金魚都能懂的網頁設計入門：24、25

目前全球最多人使用的 UI 框架（framework）就是Bootstrap，他可以幫我們快速建構出一個RWD的網頁

起手式：

在Documentation 的 Download 裡可以使用 BootstrapCDN拷貝貼在HTML文件裡 或是 使用 npm 方式下載
記得popper檔案也要做載入。

npm install bootstrap
npm install jquery popper.js --save

第一點：容器

有兩個
container 響應式容器
container-fluid 滿版容器

<div class="container">
</div>
<div class="container-fluid">
</div>

第二點：欄位

• 總和12等分column
• 在bootstrap4 有分五種尺寸

手機 直 .col-佔欄數 =>預設
手機 橫 .col-sm-佔欄數

平板 直.col-md-佔欄數
平板 橫.col-lg-佔欄數

桌機 .col-xl-佔欄數

https://codepen.io/mikeyam/pen/GRZLjMd 小練習
因為img-fluid響應式的寬度設定是以最大寬度（max-width:100%），才會出現跑版問題
可以手動設定為(width:100%;)

第三點：寬度

最大寬度：max-width:100%;
寬度：width:100%;
假設一個容器為400x400
若圖片為200x200，當圖片放到容器裡時，
若設定（max-width:100%;）圖片因為最大寬度原因。一樣維持200x200大小;
若設定（width:100%;）圖片因為寬度原因。會自適應容器大小400x400，但會因此而造成圖片模糊